<template>
<div class="matchground">
    <div class="row">
        <div class="col-6">
            <div class="user-photo">
                <img :src="$store.state.user.photo" alt="">
            </div>
            <div class="user-username">
                <span>{{$store.state.user.username}}</span>
            </div>
        </div>
        <div class="col-6">
            <div class="user-photo">
            <img :src="$store.state.pk.opponent_photo" alt="">
            </div>
            <div class="user-username">
                <span>{{$store.state.pk.opponent_username}}</span>
            </div>
        </div>
    </div>
    <div class="button-container">
        <button type="button" class="btn btn-warning" @click="click_btn">{{ btn_info }}</button>
    </div>
</div>

</template>

<script>
import {ref} from "vue"
import {useStore} from "vuex"

export default {
    setup(){
        const store = useStore();
        let btn_info = ref("开始匹配");

        const click_btn = () =>{
            if(btn_info.value === "开始匹配"){
                btn_info.value = "取消";
                store.state.pk.socket.send(JSON.stringify({
                    event:"start-matching",
                    bot_id:"0"
                }));
            }else{
                btn_info.value = "开始匹配";
                store.state.pk.socket.send(JSON.stringify({
                    event:"stop-matching",
                }));
                store.commit("updateOpponent",{
                    username:"我的对手",
                    photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
                });
            }
        }
        return {
            btn_info,
            click_btn
        }
    }
}
</script>

<style scoped>
div.matchground{
    width: 65vw;
    height: 70vh;
    background-color: rgb(50,50,50,0.5);
    margin: 5% auto;
}
div.user-photo{
    text-align: center;
    padding: 35px;
}
div.user-photo>img{
    width: 50%;
    border-radius: 50%;
}
div.user-username{
    color: aliceblue;
    font: 1.5em sans-serif;
    text-align: center;
    padding-top: 10px;
}
/* 按钮容器：核心居中逻辑，随浏览器缩放始终居中 */
.button-container {
    width: 100%; /* 占满父容器宽度，作为居中的基础 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中（若容器有高度） */
    /* 可选：固定按钮区域与底部的距离，增强布局稳定性 */
    margin-top: 62px;
}
</style>